<template>
  <div class="about">
    <el-carousel height="400px" :autoplay="isAutoplay">
      <el-carousel-item v-for="item,index in imgList" :key="index">
        <img style="width:100%;height:100%" @click="handleOpen(index)" :src="item" />
      </el-carousel-item>
      <el-carousel-item v-for="item,index in videoList" :key="index">
        <!-- {{item}} -->
        <video-player class="video-player vjs-big-play-centered" :src="item" poster="" crossorigin="anonymous"
          playsinline controls :volume="0.6" height="400px" :playback-rates="[0.7, 1.0, 1.5, 2.0]"
          @play="isAutoplay = false" @ended="isAutoplay = true" />
      </el-carousel-item>
    </el-carousel>
  </div>
  <el-card class="box-card">
    <p v-for="(item, index) in bulletinContext" :key="item.id" class="gai">
      <!-- <span class="ti">{{ index + 1 }}、{{ item.title }}：</span> -->
      <span v-html="item.content"></span>
    </p>
  </el-card>
</template>

<script>
import { ref, reactive, onMounted, getCurrentInstance } from "vue"
import { VideoJsPlayer } from 'video.js'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
export default {
  components: {
    VideoPlayer
  },
  setup() {
    //简易版视频信息列表
    // var videoList = ref([require('@/assets/video/test.mp4'),require('@/assets/video/test1.mp4'),'http://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4','https://vjs.zencdn.net/v/oceans.mp4'])
    const videoList = ref([])
    const imgList = ref([])
    const isAutoplay = ref(true)

    const { proxy } = getCurrentInstance()

    onMounted(() => {
      Getslideshow()
      Getnotice()
    })

    // 获取轮播图
    const Getslideshow = async () => {
      let res = await proxy.http.get('/getBannerList?location=TOP&type=MR')
      let suffixList = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff']
      res.forEach(item => {
        item.imgList.forEach((item1, index) => {
          let suffix = item1.split('.')[item1.split('.').length - 1]
          if (suffixList.includes(suffix)) {
            imgList.value.push(item1)
          } else {
            videoList.value.push(item1)
          }
        })
      })
    }

    const bulletinContext = ref('')
    // 获取内容公告
    const Getnotice = async () => {
      let res = await proxy.http.get('/getBulletinList?typeId=1560889493730013186')
      res.forEach(item => {
        item.content = item.content
      })
      bulletinContext.value = res
      console.log(res, 13123);
    }
    // 去除后端返回html标签
    // function htmlReg(msg) {
    //   var msg = msg.replace(/<[^>]+>|&[^>]+;/g, ""); //去除HTML Tag
    //   msg = msg.replace(/[|]*\n/, ""); //去除行尾空格
    //   msg = msg.replace(/&npsp;/gi, ""); //去掉npsp
    //   return msg;
    // }
    return {
      videoList,
      imgList,
      bulletinContext,
      isAutoplay
    }
  },
}
</script>


<style scoped>
/* @import '@/styles/variables.scss';
  @import '@/styles/mixins.scss'; */
.gai {
  /* text-indent: 2em; */
  line-height: 2.5rem;
}

.video-player {
  background-color: black;
  width: 100%;
}

.about {
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.demonstration {
  color: var(--el-text-color-secondary);
}


.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.box-card {
  margin-top: 15px;
  height: calc(100% - 450px);
  overflow-y: scroll;
}

video {
  width: 100%;
  width: 100%;
}

img {
  cursor: pointer;
}

.ti {
  text-decoration: underline
}
</style>